<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="login.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item" @click="goToPage('user-center')">个人中心</a>
                <a href="login.html" class="nav-item login-btn active">登录</a>
            </nav>
        </header>

        <main class="login-main">
            <div class="login-container">
                <div class="login-tabs">
                    <button :class="['tab-btn', { active: userType === 'client' }]"
                        @click="userType = 'client'">咨询者登录</button>
                    <button :class="['tab-btn', { active: userType === 'therapist' }]"
                        @click="userType = 'therapist'">咨询师登录</button>
                </div>

                <div class="login-form">
                    <div class="form-group">
                        <label>手机号码</label>
                        <input type="text" v-model="loginForm.phone" placeholder="请输入手机号码" @input="clearError"
                            @keyup.enter="handleLogin">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <div class="password-input">
                            <input :type="showPassword ? 'text' : 'password'" v-model="loginForm.password"
                                placeholder="请输入密码" @input="clearError" @keyup.enter="handleLogin">
                            <button type="button" class="toggle-password" @click="togglePasswordVisibility">
                            </button>
                        </div>
                    </div>

                    <div v-if="errorMessage" class="error-message">
                        {{ errorMessage }}
                    </div>

                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" v-model="loginForm.remember">
                            <span>记住我</span>
                        </label>
                        <a href="#" class="forgot-password" @click.prevent="showForgotPassword">忘记密码？</a>
                    </div>

                    <button class="login-btn" @click="handleLogin" :disabled="loading">
                        {{ loading ? '登录中...' : '登录' }}
                    </button>

                    <div class="register-link">
                        还没有账号？
                        <a href="#" @click.prevent="goToRegister">
                            {{ userType === 'client' ? '立即注册' : '申请成为咨询师' }}
                        </a>
                    </div>
                </div>

                <div class="forgot-password-modal" v-if="showForgotModal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>找回密码</h3>
                            <button class="close-btn" @click="closeForgotModal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户类型</label>
                                <div class="user-type-select">
                                    <label class="radio-label">
                                        <input type="radio" v-model="forgotForm.isClient" :value="true"> 咨询者
                                    </label>
                                    <label class="radio-label">
                                        <input type="radio" v-model="forgotForm.isClient" :value="false"> 咨询师
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>手机号码</label>
                                <input type="tel" v-model="forgotForm.phone" placeholder="请输入手机号码">
                            </div>
                            <div class="form-group">
                                <label>真实姓名</label>
                                <input type="text" v-model="forgotForm.name" placeholder="请输入真实姓名">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="submit-btn" @click="retrievePassword" :disabled="loading">
                                {{ loading ? '提交中...' : '找回密码' }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    userType: 'client', // client 或 therapist
                    loginForm: {
                        phone: '',
                        password: '',
                        remember: false
                    },
                    loading: false,
                    errorMessage: '',
                    showPassword: false,
                    showForgotModal: false,
                    forgotForm: {
                        phone: '',
                        name: '',
                        isClient: true  // 添加用户类型标识，true表示咨询者
                    }
                };
            },
            methods: {
                goToPage(page) {
                    switch (page) {
                        case 'index':
                            window.location.href = 'index.html';
                            break;
                        case 'consultation':
                            window.location.href = 'consultation.html';
                            break;
                        case 'therapist':
                            window.location.href = 'therapist.html';
                            break;
                        case 'about':
                            window.location.href = 'about.html';
                            break;
                        case 'user-center':
                            window.location.href = 'user-center.html';
                            break;
                        case 'login':
                            window.location.href = 'login.html';
                            break;
                    }
                },
                goToRegister() {
                    window.location.href = `register.html?type=${this.userType}`;
                },
                togglePasswordVisibility() {
                    this.showPassword = !this.showPassword;
                },
                clearError() {
                    this.errorMessage = '';
                },
                handleLogin() {
                    if (!this.validateForm()) {
                        return;
                    }

                    this.loading = true;
                    this.clearError();

                    // 构造登录数据，添加用户类型字段
                    const loginData = {
                        phone: this.loginForm.phone,
                        password: this.loginForm.password,
                        userType: this.userType  // 添加用户类型字段，由选项卡决定
                    };

                    console.log('发送登录请求:', loginData);

                    // 发送登录请求
                    axios.post('/api/login', loginData, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(response => {
                            console.log('登录响应:', response.data);

                            if (response.data.data?.token) {
                                // 保存token和用户类型
                                localStorage.setItem('token', response.data.data.token);
                                localStorage.setItem('userType', this.userType);  // 保存用户类型

                                if (this.loginForm.remember) {
                                    localStorage.setItem('rememberLogin', 'true');
                                    localStorage.setItem('savedPhone', this.loginForm.phone);
                                }

                                // 根据用户类型跳转到不同页面
                                if (this.userType === 'therapist') {
                                    window.location.href = 'therapist/index.html';
                                } else {
                                    window.location.href = 'user-center.html';
                                }
                            } else {
                                this.errorMessage = '登录失败，请检查账号密码';
                            }
                        })
                        .catch(error => {
                            console.error('登录失败:', error);
                            this.errorMessage = '网络错误，请稍后重试';
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },
                validateForm() {
                    this.clearError();

                    if (!this.loginForm.phone) {
                        this.errorMessage = '请输入手机号码';
                        return false;
                    }

                    const phoneRegex = /^1[3-9]\d{9}$/;
                    if (!phoneRegex.test(this.loginForm.phone)) {
                        this.errorMessage = '请输入正确的手机号码';
                        return false;
                    }

                    if (!this.loginForm.password) {
                        this.errorMessage = '请输入密码';
                        return false;
                    }

                    if (this.loginForm.password.length < 6) {
                        this.errorMessage = '密码长度不能少于6位';
                        return false;
                    }

                    return true;
                },
                showForgotPassword() {
                    this.showForgotModal = true;
                    this.forgotForm = {
                        phone: '',
                        name: ''
                    };
                },
                closeForgotModal() {
                    this.showForgotModal = false;
                },
                async retrievePassword() {
                    if (!this.validateForgotForm()) {
                        return;
                    }

                    try {
                        this.loading = true;
                        const response = await axios.post('/api/auth/retrieve-password', {
                            phone: this.forgotForm.phone,
                            name: this.forgotForm.name,
                            isClient: this.forgotForm.isClient  // 发送用户类型
                        });

                        if (response.data.code === "200") {
                            const newPassword = response.data.data;
                            alert(`密码重置成功！\n新密码: ${newPassword}\n请及时修改密码！`);
                            this.closeForgotModal();
                        } else {
                            alert(response.data.message || '重置密码失败');
                        }
                    } catch (error) {
                        console.error('重置密码失败:', error);
                        alert(error.response?.data?.message || '重置密码失败，请稍后重试');
                    } finally {
                        this.loading = false;
                    }
                },
                validateForgotForm() {
                    if (!this.forgotForm.phone) {
                        alert('请输入手机号码');
                        return false;
                    }

                    const phoneRegex = /^1[3-9]\d{9}$/;
                    if (!phoneRegex.test(this.forgotForm.phone)) {
                        alert('请输入正确的手机号码');
                        return false;
                    }

                    if (!this.forgotForm.name) {
                        alert('请输入真实姓名');
                        return false;
                    }

                    return true;
                }
            },
            created() {
                // 检查是否记住登录
                if (localStorage.getItem('rememberLogin') === 'true') {
                    this.loginForm.phone = localStorage.getItem('savedPhone') || '';
                    this.loginForm.remember = true;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>